<template>
  <div>
    <el-form
      :model="formData"
      ref="formRef"
      @submit.prevent
      :rules="formRules"
      label-width="135px"
    >
      <el-row>
        <el-col :xl="8" :lg="12">
          <el-form-item label="项目名称">
            <el-input
              v-model.trim="formData.projectName"
              class="width-custom"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :xl="8" :lg="12">
          <el-form-item label="项目编号">
            <el-input
              v-model.trim="formData.projectCode"
              class="width-custom"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :xl="8" :lg="12">
          <el-form-item label="备用项目编号">
            <el-input
              v-model.trim="formData.projectCodeBackup"
              class="width-custom"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :xl="8" :lg="12">
          <el-form-item label="项目审批类型">
            <el-input
              v-model.trim="formData.approveTypeMaxName"
              class="width-custom"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="8" :lg="12" class="approve-code">
          <el-form-item label="">
            <el-input
              v-model.trim="formData.approveTypeMinName"
              class="width-custom"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :xl="8" :lg="12">
          <el-form-item label="项目开始时间">
            <el-date-picker
              style="width: 100%"
              v-model="formData.ext1"
              value-format="YYYY-MM-DD"
              type="date"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :xl="8" :lg="12">
          <el-form-item label="项目预计验收时间">
            <el-date-picker
              style="width: 100%"
              v-model="formData.ext2"
              value-format="YYYY-MM-DD"
              type="date"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :xl="8" :lg="12">
          <el-form-item label="项目类型">
            <el-select
              v-model="formData.projectTypeCode"
              clearable
              style="width: 100%"
              value-key="dicCode"
              disabled
            >
              <el-option
                id="default-option"
                v-for="item in projectTypeArr"
                :key="item.dicCode"
                :label="item.dicValue"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xl="8" :lg="12">
          <el-form-item label="所属公司主体">
            <el-select
              v-model="formData.principalCompanyCode"
              clearable
              style="width: 100%"
              value-key="dicCode"
              disabled
            >
              <el-option
                id="default-option"
                v-for="item in principalCompanyArr"
                :key="item.dicCode"
                :label="item.dicValue"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xl="8" :lg="12">
          <el-form-item label="项目负责人">
            <el-input
              v-model.trim="formData.projectLeaderName"
              class="width-custom"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :xl="8" :lg="12">
          <el-form-item label="项目联系人">
            <el-input
              v-model.trim="formData.ext4"
              class="width-custom"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :xl="8" :lg="12">
          <el-row>
            <el-col :xl="4" :lg="4"></el-col>
            <el-col :xl="8" :lg="8" v-if="formData.projectLeaderPhone">
              <p class="p-text">电话：{{ formData.projectLeaderPhone }}</p>
            </el-col>
            <el-col :span="12" v-if="formData.projectLeaderEmail">
              <p class="p-text">邮箱：{{ formData.projectLeaderEmail }}</p>
            </el-col>
          </el-row>
        </el-col>
        <el-col :xl="8" :lg="12">
          <el-row>
            <el-col :xl="4" :lg="4"></el-col>
            <el-col :xl="8" :lg="8" v-if="formData.projectContactPhone">
              <p class="p-text">电话：{{ formData.projectContactPhone }}</p>
            </el-col>
            <el-col :span="8" v-if="formData.projectContactEmail">
              <p class="p-text">邮箱：{{ formData.projectContactEmail }}</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row>
        <el-col :xl="8" :lg="12">
          <el-form-item label=" 是否含可行性研究">
            <el-radio-group v-model="formData.isFsbStudy" disabled>
              <el-radio label="1" size="small"> 是</el-radio>
              <el-radio label="0" size="small">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="base">
        <el-col>
          <el-form-item label="项目承担单位">
            <Company
              :disabled="true"
              :data="formData.projectUnderUnit"
              ref="company"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xl="16" :lg="24">
          <el-form-item label="项目立项书" prop="projectProposalArr">
            <ecm-upload
              :files="defaultProposalFileList"
              :docid="docid"
              @setFile="handleProposaSuccess"
              :disabled="!isEditFile"
            >
              <!-- <template #temp>
                <el-link
                  v-if="
                    state.formData.approveTypeMaxCode &&
                    state.formData.approveTypeMaxCode.dicCode !== '4'
                  "
                  style="margin-left: 16px"
                  type="primary"
                  @click="
                    postDownload('研发项目申报书（简化版）-模版.docx')
                  "
                  >研发项目申报书（简化版）-模版.docx
                </el-link>
                <el-link
                  v-if="
                    state.formData.approveTypeMaxCode &&
                    state.formData.approveTypeMaxCode.dicCode === '4'
                  "
                  style="margin-left: 16px"
                  type="primary"
                  @click="
                    postDownload('预研项目申报书（简化版）-模版.docx')
                  "
                  >预研项目申报书（简化版）-模版.docx
                </el-link>
              </template> -->
            </ecm-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="isApplication">
        <el-col :xl="16" :lg="24">
          <el-form-item label="项目其他申报材料" prop="kyFiles">
            <ecm-upload
              :files="defaultFileList"
              :docid="docid"
              @setFile="handleSuccess"
              :disabled="!isEditFile"
            ></ecm-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :xl="16" :lg="24">
          <el-form-item label="项目立项书" prop="projectProposalArr">
            <el-upload
              class="upload-base"
              name="uploadFile"
              multiple
              :accept="acceptTypes"
              :action="uploadComUrl"
              :headers="uploadHeaders"
              :file-list="defaultProposalFileList"
              :on-preview="handlePreview"
            >
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="isApplication">
        <el-col :xl="16" :lg="24">
          <el-form-item label="项目申报材料" prop="kyFiles">
            <el-upload
              class="upload-base"
              name="uploadFile"
              multiple
              :accept="acceptTypes"
              :action="uploadComUrl"
              :headers="uploadHeaders"
              :file-list="defaultFileList"
              :on-preview="handlePreview"
            >
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, defineEmits } from "vue";
// import { postDictList } from "/@/api/common";
import Company from "../../create/components/company.vue";
import EcmUpload from "/@/components/ecmUpload/index.vue";
const props = defineProps({
  projectInfo: {
    type: Object
  },
  isBase: {
    type: Boolean,
    default: true
  },
  isApplication: {
    type: Boolean,
    default: false
  },
  isEditFile: {
    type: Boolean,
    default: false
  }
});

const formRef = ref<HTMLFormElement | null>(null) as any;
const defaultFileList = ref([]);
const defaultProposalFileList = ref([]);
const principalCompanyArr = ref([]);
const emit = defineEmits(["emitUpload"]);

const formRules = ref({
  projectName: [{ required: true, message: "请输入名称", trigger: "change" }],
  projectCode: [{ required: true, message: "请输入编号", trigger: "change" }],
  projectTypeCode: [
    { required: true, message: "请选择类型", trigger: "change" }
  ],
  projectUnderUnit: [
    { required: true, message: "请选择承担单位", trigger: "change" }
  ],
  projectTotalFunds: [
    { required: true, message: "请填写项目经费", trigger: "change" }
  ],
  projectLeadUnit: [
    { required: true, message: "请选择牵头单位", trigger: "change" }
  ]
});

// const handlePreview = (item: any) => {
//   if (item.response) {
//     window.open(
//       `${location.origin}${location.pathname}#/online?uuidFile=${item?.response.data.uuidFile}&fileName=${item?.response.data.fileName}`
//     );
//   } else {
//     window.open(
//       `${location.origin}${location.pathname}#/online?uuidFile=${item.uuidFile}&fileName=${item.fileName}`
//     );
//   }
// };
// const postDownload = fileName => {
//   window.open(`${location.origin}${location.pathname}/${fileName}`);
// };

let formData = reactive({
  approveTypeMaxName: "",
  approveTypeMinName: "",
  projectName: "",
  projectCode: "",
  projectCodeBackup: "",
  projectTypeCode: null,
  principalCompanyCode: null,
  projectTypeName: "",
  projectLeaderId: null,
  projectLeaderName: "",
  projectUnderUnit: [],
  projectStage: [],
  projectContractDTOList: [],
  projectMember: [], //项目成员
  reviewExpert: [], //评审专家
  projectLeadUnit: [], //牵头单位
  partakeUnit: [], //相关单位
  saveStatus: "1", // 保存 1 提交 2
  projectSETime: null, // 项目起止时间
  projectTotalFunds: null, // 项目总经费
  projectOwner: "",
  projectUnderUnitString: "",
  ext1: "", // 项目开始时间
  ext2: "", // 项目结束时间
  ext3: "", // 项目联系人id
  ext4: "", // 项目联系人name
  ext5: null, // 实际经费
  ext6: "", //
  ext7: "",
  ext8: "",
  projectLeaderPhone: "",
  projectLeaderEmail: "",
  projectContactPhone: "",
  projectContactEmail: "",
  kyFiles: null,
  approvalTypeCode: null,
  approvalTypeName: "",
  principalCompanyName: "",
  isFsbStudy: "1",
  projectProposalArr: []
});
const handleSuccess = res => {
  defaultFileList.value = res.file;
  formData.kyFiles = res.file;
  formRef.value.clearValidate();
  emit("emitUpload", {
    file: JSON.stringify(res.file),
    key: "kyFiles"
  });
};
const handleProposaSuccess = res => {
  defaultProposalFileList.value = res.file;
  formData.projectProposalArr = res.file;
  formRef.value.clearValidate();
  emit("emitUpload", {
    file: res.file,
    key: "projectProposalArr"
  });
};
// let projectTypeArr = ref([]);

// let projectUnitArr = ref([{ underUnitCode: 1, underUnitName: "XXX承担公司" }]);

// let projectLeadUnitList = ref([
//   { leadUnitCode: 1, leadUnitName: "XXX牵头公司" }
// ]);
const base = ref(false);
const docid = window["ecmDocType"].project;
onMounted(() => {
  base.value = props.isBase;
  console.log(props.projectInfo, base.value, "newVal");
});

watch(
  () => props.projectInfo,
  newVal => {
    if (!newVal) return;
    formData.projectName = newVal.projectName;
    formData.projectCode = newVal.projectCode;
    formData.projectCodeBackup = newVal.projectCodeBackup;
    formData.projectTypeCode = newVal.projectTypeName;
    formData.principalCompanyCode = newVal.principalCompanyName;
    formData.projectLeaderName = newVal.projectLeaderName;
    formData.ext4 = newVal.ext4;
    formData.ext1 = newVal.ext1;
    formData.ext2 = newVal.ext2;
    formData.projectTotalFunds = newVal.projectTotalFunds;
    formData.ext5 = newVal.ext5;
    formData.ext6 = newVal.ext6;
    formData.ext7 = newVal.ext7;
    formData.ext8 = newVal.ext8;

    formData.projectLeaderPhone = newVal.projectLeaderPhone;
    formData.projectLeaderEmail = newVal.projectLeaderEmail;
    formData.projectContactPhone = newVal.projectContactPhone;
    formData.projectContactEmail = newVal.projectContactEmail;
    formData.kyFiles = newVal.kyFiles;
    formData.projectUnderUnit =
      newVal.projectUnderUnit && JSON.parse(newVal.projectUnderUnit);
    formData.approvalTypeCode = newVal.approvalTypeCode;
    formData.approvalTypeName = newVal.approvalTypeName;
    formData.isFsbStudy = newVal.isFsbStudy;
    formData.principalCompanyName = newVal.principalCompanyName;
    formData.projectProposalArr = newVal.projectProposalArr;
    formData.approveTypeMaxName = newVal.approveTypeMaxName;
    formData.approveTypeMinName = newVal.approveTypeMinName;
    // formData.projectUnderUnitString = formData.projectUnderUnit
    //   .map(item => {
    //     return item.underUnitName;
    //   })
    //   .join("，");

    // formData.projectLeadUnit = JSON.parse(newVal.projectLeadUnit).map(item => {
    //   return item.leadUnitName;
    // });
    if (formData.projectProposalArr) {
      defaultProposalFileList.value = formData.projectProposalArr;
      defaultProposalFileList.value.map(el => {
        el["name"] = el.fileName;
      });
    }
    if (formData.kyFiles) {
      defaultFileList.value = JSON.parse(formData.kyFiles);
      defaultFileList.value.map(el => {
        el["name"] = el.fileName;
      });
    }
  },
  {
    immediate: true
  }
);

// const initProjectTypeList = async () => {
//   try {
//     const params = {
//       dicType: "rd_project_type"
//     };
//     const { code, data } = await postDictList(params);
//     if (code === 200) {
//       principalCompanyArr.value = data;
//     }
//   } catch (err) {
//     console.log(err);
//   }
// };

// initProjectTypeList();
</script>

<style lang="scss" scoped>
.des-p {
  color: #a7a3a3;
  font-size: 12px;
}

.p-text {
  line-height: 32px;
  color: #a7a3a3;
  font-size: 14px;
}

:deep .el-upload-list__item:first-child {
  margin-top: 5px;
}

:deep .approve-code .el-form-item__content {
  margin: 0 !important;
}
</style>
